<template>
	<div class="kefu navBar">
		<van-nav-bar :title="$route.meta.title" left-arrow @click-left="$routerBack" />
		<div class="kefu_view">
			<div class="inv_content">
				
				<img v-if="kefu_info" style="display: block;margin: auto;" :src="'http://www.facai888008.cn' + kefu_info.img" alt="">
				
				<p v-if="kefu_info" class="text">{{kefu_info.title}}</p>
				
				<div v-if="!kefu_info" style="text-align: center;padding-top: 2rem;">
					<van-loading size="24px">加载中...</van-loading>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import QRCode from 'qrcodejs2'

	export default {
		name: "kefu",
		async created() {
			try{
				
				const data = await this.$apis.User.kefu()
				
				this.kefu_info = data.data
				
			}catch(e){
				
				this.$toast(e.msg)
				//TODO handle the exception
			}

		},
		data(){
			
			return{
				
				kefu_info:""
				
			}
			
		}
	}
</script>

<style lang="less" scoped>
	@import '../../style/navBar.less';
	.qrcode{
	   padding: .2rem;
	   display: inline-block;
	   background-color: rgba(255,255,255,1);
	}

	.kefu_view {

		.copy {
			margin: auto;
			width: 1.4rem;
			height: .68rem;
			background: linear-gradient(0deg, rgba(28, 206, 244, 1), rgba(0, 254, 202, 1));
			border-radius: .34rem;
			color: #333333;
			font-size: .28rem;
			text-align: center;
			line-height: .68rem;
			display: block;
			margin-top: .68rem;
			margin-bottom: .4rem;
		}

		.text {
			margin-top: .3rem;
			text-align: center;
			font-size: .28rem;
			color: #94E9FF;
			font-weight: bold;
			margin-bottom: 1.47rem;
		}

		.inv_content {
			padding-top: 3.2rem;
			margin: auto;
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

	}
</style>
